<template>
	<div class="src-easy-designer">
		<div class="render-container" @keyup="keyup" tabindex="1">
			<render :tree="tree" ref="render" effect="move" @select="select"></render>
		</div>
		<div class="tools">
			<ul class="menus">
				<li v-for="(menu,i) in menus" :key="i" :class="{active:tab==i}" @click="tab=i">{{menu}}</li>
			</ul>
			<div class="content" @dragover.self.prevent="dragover" @drop.self="drop">
				<ul v-show="tab==0" class="items">
					<li v-for="item in c_items" :key="item.name">
						<h3>{{item.title||item.name}}</h3>
						<render :tree="item.tree" effect="copy" readonly></render>
					</li>
				</ul>
				<easy-form v-show="tab==1" :props="select_props" :data="select_node"></easy-form>
			</div>
		</div>
	</div>
</template>
<script>
import render from './render.js';
import EasyForm from './EasyForm.vue'
import utils from './utils.js';

export default {
	name: "EasyDesigner",
	props: {
		items: {
			type: Array, default() {
				return ['InuDiv']
			}
		}
	},
	data() {
		return {
			store: utils.store,
			tree: [],
			menus: ['组件', '属性'],
			tab: 0,
			c_items: [],
			select_data: null,
		}
	},
	computed: {
		select_node() {
			if (this.select_data)
				return this.select_data.node
		},
		select_comp() {
			if (!this.select_node) return null
			return utils.get(this.select_node.name)
		},
		select_props() {
			if (!this.select_comp) return null
			let comp = this.select_comp
			let props = []
			if (comp) {
				for (let k in comp.props) {
					let v = comp.props[k]
					props.push(Object.assign({ key: k }, v))
				}
			}
			console.log(props)
			return props
		}
	},
	methods: {
		load(tree) {
			utils.loadAll(tree).then(_ => {
				tree = tree && (tree instanceof Array ? tree : [tree])
				this.tree = tree;
				utils.store.tree = tree
				// this.data = this.tree.data
			}, function () {
				let err = [];
				for (let k in utils.status) {
					if (utils.status[k] == 1) {
						err.push(k);
					}
				}
				console.log(err.join(','), "加载失败");
			});
		},
		select(data) {
			this.select_data = data
			this.tab = 1
		},
		drop() {
			utils.tree.remove(utils.store.drag, utils.store.drag_remove)
		},
		dragover() {

		},
		keyup(e) {
			if (e.keyCode == 13) {
				console.log('enter press')
			} else if (e.keyCode == 8) {
				utils.tree.remove(this.select_data, true)
			}
			console.log(e.keyCode)
		}
	},
	components: {
		render,
		EasyForm,
	},
	mounted() {
		utils.loadAll(this.items.map(x => ({ name: x }))).then(() => {
			this.c_items = this.items.map(x => {
				let item = utils.get(x)
				if (!item.tree)
					item.tree = [{
						name: item.name,
						title: item.title,
					}]
				return item
			})
		})
	}
}
</script>
<style lang="less">
.src-easy-designer {
}
</style>
